    <template>
        <div class="span12">

            <!-- BEGIN SAMPLE FORM PORTLET-->

            <div class="portlet box blue">

                <div class="portlet-title">

                    <div class="caption" style="margin-top:30px"><i class="icon-reorder"></i><h1 style="align:left">{{items[count*10].top}}</h1></div>

                    <div class="tools">

                        <a href="javascript:" class="collapse"></a>

                        <a href="#portlet-config" data-toggle="modal" class="config"></a>

                        <a href="javascript:" class="reload"></a>

                        <a href="javascript:" class="remove"></a>

                    </div>

                </div>
                <div class="portlet-body form">

                    <!-- BEGIN FORM-->

                    <form action="#" class="form-horizontal">
                        <div class="control-group"  >
                            <label class="control-label"><h2>{{items[count*10].title}}</h2></label>

                            <div class="controls" style="margin-left: 565px">

                                <div class="row-fluid" style="margin-top:10px">

                                    <div class="span12">

                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:10px;font-size:16px"><span><input name="checkbox" v-model="items[count*10].checked" type="checkbox"></span>{{items[count*10].question}}</div>

                                        </label>

                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:10px;font-size:16px"><span><input name="checkbox" v-model="items[count*10+1].checked" type="checkbox"></span>{{items[count*10+1].question}}</div>

                                        </label>

                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input  name="checkbox" v-model="items[count*10+2].checked" type="checkbox"></span>{{items[count*10+2].question}}</div>

                                        </label>
                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input  name="checkbox" v-model="items[count*10+3].checked" type="checkbox"></span>{{items[count*10+3].question}}</div>

                                        </label>

                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input name="checkbox" v-model="items[count*10+4].checked" type="checkbox"></span>{{items[count*10+4].question}}</div>

                                        </label>

                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input  name="checkbox" v-model="items[count*10+5].checked" type="checkbox"></span>{{items[count*10+5].question}}</div>

                                        </label>
                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input  name="checkbox" v-model="items[count*10+6].checked" type="checkbox"></span>{{items[count*10+6].question}}</div>

                                        </label>

                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input  name="checkbox" v-model="items[count*10+7].checked" type="checkbox"></span>{{items[count*10+7].question}}</div>

                                        </label>

                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input  name="checkbox" v-model="items[count*10+8].checked" type="checkbox"></span>{{items[count*10+8].question}}</div>

                                        </label>
                                        <label class="checkbox line">

                                            <div class="checker" align="left" style="margin-top:16px;font-size:16px"><span><input  name="checkbox" v-model="items[count*10+9].checked" type="checkbox"></span>{{items[count+9].question}}</div>

                                        </label>
                                    </div>

                                </div>

                            </div>

                        </div>
                        <div class="form-actions" style="margin-top:20px">
                            <Progress :percent="percent" hide-info></Progress>
                            <ButtonGroup size="large">
                                <Button  @click="minus" type="warning" style="margin-left:10px;" >
                                    <Icon type="chevron-left"></Icon>
                                    上一题
                                </Button>
                                <Button  @click="add" type="warning" style="margin-left:10px;" >
                                    <Icon type="chevron-right"></Icon>
                                     下一题
                                </Button>
                            </ButtonGroup>
                        </div>

                    </form>

                    <!-- END FORM-->

                </div>


            </div>

            <!-- END SAMPLE FORM PORTLET-->
            <template>
                <!--<Button type="primary" @click="modalConfirm = true">温馨提示</Button>-->
                <Modal
                        v-model="modalConfirm"
                        title="温馨提示"
                        width="300"
                        @on-ok="ok"
                        @on-cancel="cancel">
                    <p>系统即将依据您的答案为您自动生成测试结果，</p>
                    <p>您将无法修改答案重新测试，您确定要提交么？</p>
                </Modal>
            </template>
        </div>

    </template>

<script>
  import {exam} from '../../../../api/index.js';
//  import Child from '../../../views/my-components/modal-confirm/confirm.vue';
  let R1 = 0;
  let R2 = 0;
  let R3 = 0;
  let I1 = 0;
  let I2 = 0;
  let I3 = 0;
  let A1 = 0;
  let A2 = 0;
  let A3 = 0;
  let S1 = 0;
  let S2 = 0;
  let S3 = 0;
  let E1 = 0;
  let E2 = 0;
  let E3 = 0;
  let C1 = 0;
  let C2 = 0;
  let C3 = 0;
  export default {
      data () {
          return {
              R: 0,
              I: 0,
              A: 0,
              S: 0,
              E: 0,
              C: 0,
              HolandCode: 'R',
              count: 0,
              items: [],
              percent: 0,
//              buttonLabel: '下一题',
              isReady: false,
              modalConfirm: false,
              content: '',
              userid: this.$route.params.userid
          };
      },
      template: '',
      mounted () {
          this.getQuestions({data: {count: this.count}});
      },
      watch: {
          top: {
              handler (curVal, oldVal) {
                  this.questionTop = curVal;
              },
              deep: true
          },
          title: {
              handler (curVal, oldVal) {
                  this.questionTop = curVal;
              },
              deep: true
          }
      },
      methods: {
          getQuestions () {
              const self = this;
              exam.getQuestion({data: {count: self.count}}).then((res) => {
                  for (let i = 0; i < 10; i++) {
                      self.items.push(res.data.data.questions[i]);
                  }
              }, function (error) {
                  this.message(error);
              });
          },
          addTestResult () {
              exam.addResult({data: {R: this.R, I: this.I, A: this.A, S: this.S, E: this.E, C: this.C, myType: this.HolandCode, userid: this.userid}}).then((res) => {
              }, function (error) {
                  this.message(error);
              });
          },
          add () {
              this.count++;
              if (this.count < 18) {
                  this.getQuestions({data: {count: this.count}});
              }
              this.percent += 5.882;
              const checks = document.getElementsByName('checkbox');
              if (this.count === 1) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          R1++;
                      }
                  }
              } else if (this.count === 2) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          I1++;
                      }
                  }
              } else if (this.count === 3) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          A1++;
                      }
                  }
              } else if (this.count === 4) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          S1++;
                      }
                  }
              } else if (this.count === 5) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          E1++;
                      }
                  }
              } else if (this.count === 6) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          C1++;
                      }
                  }
              } else if (this.count === 7) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          R2++;
                      }
                  }
              } else if (this.count === 8) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          I2++;
                      }
                  }
              } else if (this.count === 9) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          A2++;
                      }
                  }
              } else if (this.count === 10) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          S2++;
                      }
                  }
              } else if (this.count === 11) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          E2++;
                      }
                  }
              } else if (this.count === 12) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          C2++;
                      }
                  }
              } else if (this.count === 13) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          R3++;
                      }
                  }
              } else if (this.count === 14) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          I3++;
                      }
                  }
              } else if (this.count === 15) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          A3++;
                      }
                  }
              } else if (this.count === 16) {
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          S3++;
                      }
                  }
              } else if (this.count === 17) {
                  this.isReady = true;
                  this.modalConfirm = true;
                  for (let i = 0; i < checks.length; i++) {
                      if (checks[i].checked) {
                          C3++;
                      }
                  }
                  this.R = R1 + R2 + R3;
                  this.I = I1 + I2 + I3;
                  this.A = A1 + A2 + A3;
                  this.S = S1 + S2 + S3;
                  this.E = E1 + E2 + E3;
                  this.C = C1 + C2 + C3;
                  let a = [this.R, this.I, this.A, this.S, this.E, this.C];
                  let b = ['R', 'I', 'A', 'S', 'E', 'C'];
                  for (let i = 0; i < 6; i++) {
                      for (let j = i + 1; j < 6 - i; j++) {
                          if (a[j] < a[j + 1]) {
                              let temp;
                              temp = a[j];
                              a[j] = a[j + 1];
                              a[j + 1] = temp;
                              let param;
                              param = b[j];
                              b[j] = b[j + 1];
                              b[j + 1] = param;
                          }
                      }
                      this.HolandCode = b[0] + b[1] + b[2];
                  }
                  this.R = 0;
                  this.I = 0;
                  this.A = 0;
                  this.S = 0;
                  this.E = 0;
                  this.C = 0;
              }
          },
          minus () {
              if (this.percent <= 0) {
                  return false;
              }
              this.percent -= 5.882;
              this.count--;
              if (this.count === 0) {
                  R1 = 0;
              } else if (this.count === 1) {
                  I1 = 0;
              } else if (this.count === 2) {
                  A1 = 0;
              } else if (this.count === 3) {
                  S1 = 0;
              } else if (this.count === 4) {
                  E1 = 0;
              } else if (this.count === 5) {
                  C1 = 0;
              } else if (this.count === 6) {
                  R2 = 0;
              } else if (this.count === 7) {
                  I2 = 0;
              } else if (this.count === 8) {
                  A2 = 0;
              } else if (this.count === 9) {
                  S2 = 0;
              } else if (this.count === 10) {
                  E2 = 0;
              } else if (this.count === 11) {
                  C2 = 0;
              } else if (this.count === 12) {
                  R3 = 0;
              } else if (this.count === 13) {
                  I3 = 0;
              } else if (this.count === 14) {
                  A3 = 0;
              } else if (this.count === 15) {
                  S3 = 0;
              } else if (this.count === 16) {
//                  this.buttonLabel = '上一题';
                  E3 = 0;
              } else if (this.count === 17) {
//                  this.buttonLabel = '上一题';
                  C3 = 0;
              }
          },
          ok () {
//              this.addTestResult({data: {R: this.R, I: this.I, A: this.A, S: this.S, E: this.E, C: this.C, myType: this.HolandCode}});
              exam.addResult({data: {R: this.R, I: this.I, A: this.A, S: this.S, E: this.E, C: this.C, myType: this.HolandCode, userid: '2'}}).then((res) => {
                  this.$router.push({
                      path: '/test/result',
                      name: 'result',
                      params: {
                          R: this.R,
                          I: this.I,
                          A: this.A,
                          S: this.S,
                          E: this.E,
                          C: this.C,
                          myType: this.HolandCode,
                          userid: '2'
                      }
                  });
                  this.$Message.info('提交成功');
              }, function (error) {
                  this.$Message.info('提交失败');
                  this.message(error);
              });
          },
          cancel () {
              this.$Message.info('取消成功');
          }
      }
  };
</script>
